<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/4/2
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% request.setCharacterEncoding("utf-8");
    session.getAttribute("userName");
%>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<%--    <script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/skin/WdatePicker.js"></script>--%>
</head>
<body onload="loadData()">
<h1 align=center>预订桌位</h1>
<hr/>
<form class="form-horizontal">

    <div class="form-group" align="left">
        <label class="col-md-2"></label>
        <div class="col-md-2" >
            <input type="text" id="tableName" placeholder="请输入名字" class="form-control">
        </div>
        <div class="col-md-2" >
            <input type="text" id="tableState" placeholder="请输入状态" class="form-control">
        </div>
        <input type="button" class="btn btn-success btn-sm" onclick="loadData()" value="查询">

        <script>
            form.projectPorperty.value = '${user.projectPorperty}';
        </script>
    </div>
</form>
<%--<input type="button" class="btn btn-success btn-sm" onclick="bitDelte()" value="批量删除">--%>
<table class="table">
    <thead>
    <th><input type="checkbox" name="selectId" onclick="quanxuan(this)">全选</th>
    <th onclick="orderBy(this,'sys_id')">桌子序号<span>↑</span></th>
    <th>桌子名称</th>
    <th>桌子状态</th>
    <th>可坐人数</th>
    <th onclick="orderBy(this,'salt')">预定</th>
    </thead>
    <tbody id="tb">

    </tbody>
</table>
<div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
</div>

<%--模态框--%>
<div class="modal fade" id="one" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header" style="background-color: green; height: 20px;">
            </div>
            <div class="modal-body">
                <table class="table" border="0">
                    <tr>
<%--                        四列--%>
                        <th>
                            桌位号
                        </th>
                        <th>
                            用户数量
                        </th>
                    </tr>
                    <tr><td><input  id="tId" readonly="true"></td>
                        <td>
                            <input type="text" id="userNumber" >
                        </td>
                    </tr>
                    <tr>
                        <th>姓名</th>
                        <th>电话</th>
                    </tr>
                    <tr>
                        <td>
                            <input  type="text" value="${userName}" id="tUserName"  >
                        </td>
                        <td>
                            <input type="text" id="tUserTel" >
                        </td>
                    </tr>
                    <tr>
                        <td>起止时间：</td>
                        <td>
<%--                           获取值用${#id}.val()--%>
                            <input type="text" placeholder="请选择开始时间" id="demoTest">
                            <input type="text" placeholder="请选择结束时间" id="demoTestTime2">
                        </td>
                    </tr>

                    <tr>
                        <td><span style="color:red" id="info"></span></td>
                        <td colspan="2">
                            <button type="button" onclick="update()" class="btn btn-success btn-sm">预定</button>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
    </div>
</div>

</body>
<%--时间插件--%>
<script src="${pageContext.request.contextPath}/My97DatePicker/laydate/laydate.js"></script>
<%--//执行一个laydate实例--%>
<script>

    laydate.render({
        elem: '#demoTest'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#demoTestTime2'
        ,type: 'datetime'
    });


</script>
<script>
    //默认页面是第一页
    var page = 1;
    var row = 5;
    var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadData();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }

        loadData();

    }

    //修改
    function update() {
        //获取时间
        var tTime = $("#demoTest").val();
        var tArrtime = $("#demoTestTime2").val();
        var tId = $("#tId").val();
        var tUserName = $("#tUserName").val();
        var userNumber = $("#userNumber").val();
        var tUserTel = $("#tUserTel").val();
        console.log("当前的时间类型为"+tArrtime);
        console.log("当前的tid为"+tId);
            //ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/table/updateAjax",
                type: "post",
                data: {"tTime": tTime, "tArrtime": tArrtime,"userNumber":userNumber,"tId":tId,"tUserName":tUserName,"tUsertel":tUserTel},
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    //alert(data.info);
                    $("#info").text(data.info);
                    console.log("失败了吗？"+data.info);
                    if (data.info == "申请成功，待审核！") {
                        //关闭弹窗
                        $("#one").modal("hide");
                        //刷新
                        loadData();
                    }
                }
            })

    }
    //加载数据
    function loadData() {
         // var t_when = document.getElementById("t_when").value;
         // console.log("选中对象为：" + t_when);
        //做模糊查询 获取输入框里面的值
        var tableState = $("#tableState").val();
        var tableName = $("#tableName").val();
        var userNumber = $("#userNumber").val();
        console.log("tableName=" + tableName);

        $.ajax({
            url: "${pageContext.request.contextPath}/table/tableListAjax",
            type: "get",
            data: {"tName": tableName,"tState":tableState,"userNumber":userNumber,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                console.log(typeof (data.info))
                if (typeof (data.info) == 'string') {
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数
                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        console.log("当前的颜色" + data.info[i].colName)
                        html += "<tr"+" "+data.info[i].colName+">" +
                            "<td ><input  type=\"checkbox\" name=\"selectId\" value='" + data.info[i].tId + "'></td>" +
                            "<td>" + data.info[i].tId + "</td>" +
                            "<td >" + data.info[i].tName + "</td>" +
                            "<td>" + data.info[i].tState + "</td>" +
                            "<td>" + data.info[i].tNumber + "</td>" +
                            "<td>" +
                            "<button type='button'"+ data.info[i].butonUser1+" class=\"btn btn-success btn-sm\" onclick='updatePageWindow(this)'>预定此桌位</button>" +
                            "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }
            }
        })
    }

    //进行修改
    function updatePageButton(obj) {
        // 做模糊查询
        // var options=$("#select option:selected"); //获取选中的项
        // console.log("选中对象为：" + options);

        //2.1    获取选中的id（这一行）,parent:<td> parent:<tr>,在tr里找td，找第一个下标是0
        var t_id = $(obj).parent().parent().find("td").eq(1).text();
        var t_when = document.getElementById("t_when").value;
        console.log("tableID=" + t_id);

        $.ajax({
            url: "${pageContext.request.contextPath}/table/tableUpdateAjax",
            type: "get",
            data: {"tId": t_id,"tWhen": t_when,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (typeof (data.info) != '1') {
                    //清空网页代码
                    $("#tb").html(data.info);
                } else {
                    //取出总页数
                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        html += "<tr>" +
                            "<td><input  type=\"checkbox\" name=\"selectId\" value='" + data.info[i].tId + "'></td>" +
                            "<td>" + data.info[i].tId + "</td>" +
                            "<td>" + data.info[i].tName + "</td>" +
                            "<td>" + data.info[i].tState + "</td>" +
                            "<td>" + data.info[i].tNumber + "</td>" +
                            "<td>" + data.info[i].tTime + "</td>" +
                            "<td>" + data.info[i].tArrtime + "</td>" +
                            "<td>" +
                            "<input type='button' class=\"btn btn-success btn-sm\" id = 'button1' value='已预定待处理' style='color: #f0ad4e' />"
                            +
                            // "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePageButton(this)'>预定此桌位</button>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePageWindow(this)'>取消预订</button>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='deletePage(this)'>占座</button>" +
                            "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }
            }
        })
    }


    //打开修改弹窗
    function updatePageWindow(obj) {
        //显示弹窗
        $("#one").modal("show");
        //清空提示信息
        $("#info").text("");

        var tId = $(obj).parent().parent().find("td").eq(1).text();
        $("#tId").val(tId);
        //id选择器

        var tName = $(obj).parent().parent().find("td").eq(2).text();
        $("#tName").val(tName);

        var tState = $(obj).parent().parent().find("td").eq(3).text();
        $("#tState").val(tState);

        var userNumber = $(obj).parent().parent().find("td").eq(4).text();
        $("#userNumber").val(userNumber);

    }

    function deletePage(obj) {
        var is = confirm("你确定删除吗");
        if (is) {
            var id = $(obj).parent().parent().find("td").eq(0).text();
            console.log(id);
            //ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/deleteAjax?sysId=" + id,
                type: "get",
                data: {"sysId": id},
                dataType: "json",
                success: function () {
                    console.log(id);
                    loadData();
                }
            })
        }
    }

    //排序
    function orderBy(obj, name) {
        console.log(name);
        var v = $(obj).find("span").text();

        colName = name;
        if (v == "👆") {
            $(obj).find("span").text("👇");
            order = "desc";
        } else {
            $(obj).find("span").text("↑");
            order = "asc";
        }
        loadData();
    }
    //全选
    function quanxuan(obj) {
        //1 获取全选的值
        //  var v = $(obj).prop("checked");
        // console.log(v);
        // $("input[name='selectId']").prop("checked",v);
        $("input[name='selectId']").prop("checked",$(obj).prop("checked"));
    }
</script>
</html>
